<template>
	<div >
		<router-view ></router-view>
		<section class="top-back" v-show="isTopNav">
	   <mu-icon color="#373737" :size="32" value="keyboard_arrow_left" style="flex: 1; text-align: center; cursor: pointer;" @click="goBack()"/>
       <span class="title-span">{{titleName}}</span>
       <span style="flex: 1;"></span>
    </section>
    	<!--<mu-paper class="botNav" v-show="isBotNav">
		  <mu-bottom-nav :value="bottomNav" @change="handleChange" > 
		    <mu-bottom-nav-item value="home" title="首页" href="#/index" icon="home" iconClass="bottom-icon"   />
		    <mu-bottom-nav-item value="question_answer" title="问答"  icon="question_answer" iconClass="bottom-icon" activeClass="router-link-active" />
		    <mu-bottom-nav-item value="comment" title="统计" icon="insert_chart" iconClass="bottom-icon" />
		    <mu-bottom-nav-item value="account_box" title="我的" href="#/user-info" icon="account_box" iconClass="bottom-icon" />
		  </mu-bottom-nav>
		</mu-paper>-->
    	<mu-paper class="botNav_tea" v-show="isBotNav">
		  <mu-bottom-nav :value="bottomNav" @change="handleChange" > 
		  	<mu-bottom-nav-item v-show="stdIndex" value="home" title="首页" href="#/index" icon="home" iconClass="bottom-icon"   />
		    <mu-bottom-nav-item v-show="!stdIndex" value="home" title="首页" href="#/index_teacher" icon="home" iconClass="bottom-icon"   />
		    <!--<mu-bottom-nav-item value="question_answer" title="问答" href="https://vzan.com/f/s-1021724" icon="question_answer" iconClass="bottom-icon" activeClass="router-link-active" />
		    <mu-bottom-nav-item value="comment" title="统计" icon="insert_c hart" iconClass="bottom-icon" />-->
		    <mu-bottom-nav-item value="question_answer" title="问答"  href="#/qaIndex"   icon="question_answer" iconClass="bottom-icon" activeClass="router-link-active" />
		    <mu-bottom-nav-item value="comment" title="统计" href="#/teacherEchartsIndex" icon="insert_chart" iconClass="bottom-icon" />
		    <mu-bottom-nav-item value="account_box" title="我的" href="#/user-info" icon="account_box" iconClass="bottom-icon" />
		  </mu-bottom-nav>
		</mu-paper>
    

     <mu-drawer :open="open" :docked="docked" @close="toggle()" width="80%">
        <div class="user-info">
          <mu-avatar slot="left" :size="72" :iconSize="48" icon="perm_identity" color="blue500" backgroundColor="white"/><br/>
          <mu-flat-button :label="userInfo.C_USERALIAS" href="#/user-info" @click="toggle()" class="demo-flat-button" color="white" rippleColor="blue500"/>
        </div>
         <mu-list @itemClick="docked ? '' : toggle()">
            <mu-list-item title="班级点名" href="#/rollCall" v-if="userIdentity=='Teacher'">
               <mu-icon slot="left" value="snooze" color="orange500"/>
            </mu-list-item>
            <mu-list-item title="教师评学" href="#/teacher"  v-if="userIdentity=='Teacher'">
              <mu-icon slot="left" value="person_pin" color="red500"/>
            </mu-list-item>
            <mu-list-item title="课堂日志" href="#/commissary" v-if="isCommissary">
              <mu-icon slot="left" value="today" color="green500"/>
            </mu-list-item>
            <mu-list-item title="课堂考勤" href="#/attendance" v-if="isCommissary">
              <mu-icon slot="left" value="person_pin" color="green500"/>
            </mu-list-item>
            <mu-list-item title="学生评教" href="#/student" v-if="userIdentity=='Student'">
              <mu-icon slot="left" value="receipt" color="green500"/>
            </mu-list-item>
            <mu-list-item v-if="docked" @click.native="open = false" />
        </mu-list> 
        <!--<div class="example-apptab" style="bottom:10px">
        <mu-flat-button label="修改密码" class="demo-flat-button" style="float:left" icon="lock" href="#/ChangePassword" @click="toggle()"/>
        <mu-flat-button label="退出" class="demo-flat-button" icon="power_settings_new" @click="logout()"/>
        </div>-->
      </mu-drawer>
      <!--<mu-toast v-if="toast" :message="message" />-->
      <transition name="fade">
	      <div v-show="toast" class="selfToast-container" >
	      		<div class="selfToast" >
	      			{{message}}
	      		</div>
	      </div>
      </transition>
      <!--<div id="bot-bg" >
      	<mu-card-media id="card-img"  style=" opacity: 0.4;">
          <img :src="appbg"/>
        </mu-card-media>
      </div>-->
	</div>
	
</template>
<script>
import * as types from './store/types'
import 'babel-polyfill'
export default {
  data () {
    return {
      open: false,
      docked: true,
      isLogin:false,
      toast:false,
      message:'',
      userIdentity:'',
      isCommissary:false,
      userInfo:{},
      bottomNav: 'home',
      appbg:'static/images/appbg.png',
      isBotNav:false,
      isTopNav:false,
      titleName:'',
      stdIndex:true
    }
  },
  computed:{
//  activeTab:function(){
//    let that=this
//    that.userIdentity = localStorage.userIdentity
//    that.isCommissary = localStorage.isCommissary=='true'
//    if(localStorage.userInfo!=null){
//      that.userInfo = JSON.parse(localStorage.userInfo)
//    }
//    return "tab1"
//  },
//  bottomNav:function(){
//    let that=this
//    that.userIdentity = localStorage.userIdentity
//    that.isCommissary = localStorage.isCommissary=='true'
//    if(localStorage.userInfo!=null){
//      that.userInfo = JSON.parse(localStorage.userInfo)
//    }
//    return "recents"
//  }
  },
  watch:{
    userIdentity(val){
      localStorage.userIdentity=val
    },
    isCommissary(val){
      localStorage.isCommissary=val
    },
    userInfo(val){
      localStorage.userInfo = JSON.stringify(val)
    },
     $route(){
		this.refreshNoChange()
    }
  },
  methods: {
  	handleChange (val) {
      this.bottomNav = val
    },
    getRightIndex(){
		if(localStorage.userNumber.length==12){
			this.stdIndex=true
		}else if(localStorage.userNumber.length==10){
			this.stdIndex=false
		}
	},
//  handleTabChange (val) {
//    this.activeTab = val
//  },
    toggle (flag) {
        this.open = !this.open
        this.docked = !flag
    },
    showToast (msg) {
        this.message = msg
        this.toast = true
//      var domToast=document.getElementsByClassName('mu-toast')
//		domToast[0].style.marginLeft=(-(parseInt(domToast[0].offsetWidth)/2)+'px')
        if (this.toastTimer) clearTimeout(this.toastTimer)
        this.toastTimer = setTimeout(() => { this.toast = false }, 1000)
    },
    logout(){
      this.toggle()
      this.isLogin = false
      this.$store.commit(types.LOGIN, '')
      localStorage.removeItem('token')
      this.$router.push({
        path: 'login'
      })
    },
    gotoAddress(path){
        this.$router.push(path)
   	},
   	goBack(){
     	this.$router.go(-1)
    },
   	handleChange (val) {
      this.bottomNav = val
    },
    refreshNoChange(){
      	var _url=window.location.href
    	var index=_url.lastIndexOf("#")
    	var lastPath=_url.substring(index+1)
    	if(lastPath=='/index_teacher'){
    		this.bottomNav='home'
    		this.isTopNav=false
    		this.isBotNav=true
    	}else if(lastPath=='/index'){
    		this.bottomNav='home'
    		this.isTopNav=false
    		this.isBotNav=true
    	}else if(lastPath=='/commissary'){
    		this.titleName='课堂日志'
    		this.isTopNav=true
    		this.isBotNav=false
    	}else if(lastPath.indexOf('/attendance')!=-1){
    		this.titleName='课堂考勤'
    		this.isTopNav=true
    		this.isBotNav=false
    	}else if(lastPath.indexOf('/AttendanceWad')!=-1){
    		this.titleName='考勤补录'
    		this.isTopNav=true
    		this.isBotNav=false
    	}else if(lastPath=='/student'){
    		this.titleName='学生评教'
    		this.isTopNav=true
    		this.isBotNav=false
    	}else if(lastPath=='/login'){
    		this.isTopNav=false
    		this.isBotNav=false
    	}else if(lastPath=='/ChangePassword'){
    		this.titleName='修改密码'
    		this.isTopNav=true
    		this.isBotNav=false
    	}else if(lastPath=='/user-info'){
    		this.bottomNav='account_box'
    		this.isTopNav=false
    		this.isBotNav=true
    	}else if(lastPath=='/teacher'){
    		this.titleName='教师评学'
    		this.isTopNav=true
    		this.isBotNav=false
    	}else if(lastPath=='/rollCall'){
    		this.titleName='班级点名'
    		this.isTopNav=true
    		this.isBotNav=false
    	}else if(lastPath=='/tzzx'){
        this.titleName='通知中心'
        this.isTopNav=true
        this.isBotNav=false
      }else if(lastPath.indexOf('/tznr')!=-1){
        this.titleName='通知内容'
        this.isTopNav=true
        this.isBotNav=false
      }else if(lastPath.match('/ttk')=='/ttk'){
    		this.titleName='调课'
    		this.isTopNav=true
    		this.isBotNav=false
    	}else if(lastPath=='/personal-info'){
    		this.titleName='个人中心'
    		this.isTopNav=true
    		this.isBotNav=false
    	}else if(lastPath=='/bind-account'){
    		this.titleName='账号绑定'
    		this.isTopNav=true
    		this.isBotNav=false
    	}else if(lastPath=='/problem-feedback'){
    		this.titleName='问题反馈'
    		this.isTopNav=true
    		this.isBotNav=false
    	}else if(lastPath=='/feeling'){
    		this.titleName='感悟'
    		this.isTopNav=true
    		this.isBotNav=false
    	}else if(lastPath=='/clear-cache'){
    		this.titleName='清理缓存'
    		this.isTopNav=true
    		this.isBotNav=false
    	}else if(lastPath.indexOf('/schedule')!=-1){
    		this.titleName=''
    		this.isTopNav=true
    		this.isBotNav=false
    	}else if(lastPath.indexOf('/zk')==0){
    		this.titleName='增课'
    		this.isTopNav=true
    		this.isBotNav=false
    	}else if(lastPath=='/improve_info'){
    		this.titleName='完善资料'
    		this.isTopNav=true
    		this.isBotNav=false
    	}else if(lastPath=='/electiveCourseEvaluation'){
    		this.titleName='选修课评教'
    		this.isTopNav=true
    		this.isBotNav=false
    	}else if(lastPath.indexOf('/teacherAttendance')!=-1){
    		this.titleName='班级点名'
    		this.isTopNav=true
    		this.isBotNav=false
    	}else if(lastPath.indexOf('/setKey')!=-1){
    		this.titleName='秘钥设置'
    		this.isTopNav=true
    		this.isBotNav=false
    	}
//  	if(lastPath=='/'||lastPath=='/user-info'){
//  		this.isBotNav=true
//  		this.isTopNav=false
//  	}else{
//  		this.isBotNav=false
//  		this.isTopNav=true
//  	}
    }
  },mounted(){
//	var domToast=document.getElementsByClassName('mu-toast')
    
    if (window.localStorage.getItem('token')) {
//    this.isLogin=true
      this.isBotNav=true
    }
    this.refreshNoChange()
  }
}
</script>
<style scoped>
  /*.user-info{
    width:100%;
    height:200px;
    padding: 30px;
    text-align: center;
    background-color: #2799f3;
  }*/
 .botNav_tea{
	position: fixed !important;
    left: 0!important;
	bottom: 0!important; 
	/*height: 3.4rem!important;*/
	z-index: 250;
	width: 100%;
 }
 .selfToast-container{
 	position:fixed; 
 	width: 100%;
 	height: 100%; 
 	background-color: rgba(0,0,0,0);
 	z-index: 200;
 	left: 0; 
 	top: 0;
 	display: flex;
 	justify-content: center;
 	align-items: center;
 }
 .selfToast{
 	height: 2.4rem;
 	line-height: 2.4rem;
 	background-color: #757575 !important;
 	text-align: center;
 	padding: 0 1.1rem;
    border-radius:5px !important;
    color: #fff;
    font-size: 0.9rem;
 }
 .fade-enter-active,.fade-leave-active{
 	transition: all 0.6s ease-in-out
 }
 .fade-enter-active{
 	opacity: 1;
 }
 .fade-leave-active{
 	opacity: 0;
 }
 .fade-enter,.fade-leave{
 	opacity: 0;
 }
.top-back{
	position: fixed;
	z-index: 202;
	top: 0;
	left: 0;
	width: 100%; 
	height: 3rem; 
	background: white; 
	display: flex; 
	flex-direction: row; 
	justify-content: center;
	align-items: center;
	box-shadow: 0 2px 4px rgba(202,202,202,0.2);
}
.title-span{
	flex: 6.6; 
	height: 100%; 
	line-height: 3rem; 
	text-align: center;
	font-size:1.2rem
}
 #bot-bg{
  	position: fixed;
  	bottom: 1rem;
  	z-index: -10;
  	
  	display: flex;
  	justify-content: center;
	/*align-items: center;*/
 }
 
 .botNav{
	position: fixed !important;
    left: 0!important;
	bottom: 0!important; 
	/*height: 3.4rem!important;*/
	z-index: 200;
	width: 100%;
	/*border-top:2px solid white;*/
	/*background: #2799f3!important;*/
	/*box-shadow: 0 -2px 5px rgba(209,209,209,0.2);*/
 }
 .bottom-icon{
 	color: #acacac;
 }
 .red-this{
 	color: red !important;
 }
  .mu-sub-header{
    font-size:20px;
    background-color:whitesmoke;
  }
  .topSelectBtn{
    background-color: blue;
    color:white;
  }
  .mu-list-item-zzg{
    padding:20px;
  }
  /*toast弹出框样式*/
  .mu-toast{
    background-color: #757575 !important;
    text-align: center;
    width: auto;
    /*left: 50%;*/
    margin: 0 auto;
    left: 0;
    /*right: 0;*/
    top: 50% !important;
    padding: 0 1rem!important;
    border-radius:5px !important;
  }
  .example-appbar{
  	/*position: fixed;*/
    /*right: 0;*/
    /*top: 0;*/
    /*margin-top: 3.4rem;*/
    width: 100%;
    height: 3rem;
    -webkit-transition: all .45s cubic-bezier(.23,1,.32,1);
    transition: all .45s cubic-bezier(.23,1,.32,1);
  }
  .example-apptab{
    position: fixed !important;
    right: 0;
    bottom: 0;
    width: auto;
    -webkit-transition: all .45s cubic-bezier(.23,1,.32,1);
    transition: all .45s cubic-bezier(.23,1,.32,1);
  }
  #main{
    padding-bottom:60px;
  }
  .bg-white{
  	background-color: white;
  }
  .active{
  	background-color:rgba(255,255,255,0)!important;
  }
  
  
  
</style>
